<template>
  <view class="bg-gray-50 min-h-screen w-[750rpx] pb-[150rpx] box-border">
    <!-- 用户信息头部 -->
    <view class="bg-gradient-to-r from-blue-600 to-blue-800 text-white p-[40rpx] rounded-b-[40rpx] shadow-lg">
      <view class="flex justify-between items-center mb-[30rpx]">
        <view class="flex items-center text-[28rpx]">
          <IconFont name="map-marker-alt" class="mr-[10rpx]" />
          <text>南宁市</text>
        </view>
        <view class="w-[60rpx] h-[60rpx] bg-white bg-opacity-20 rounded-full flex items-center justify-center">
          <IconFont name="cog" class="text-[30rpx]" />
        </view>
      </view>
      
      <view class="flex items-center mb-[30rpx]">
        <view class="w-[120rpx] h-[120rpx] rounded-full border-4 border-white border-opacity-30 bg-white overflow-hidden mr-[30rpx]">
          <image 
            src="https://via.placeholder.com/120x120/1a73e8/ffffff?text=头像" 
            class="w-full h-full object-cover"
          />
        </view>
        <view class="flex-1">
          <view class="text-[40rpx] font-bold mb-[10rpx] flex items-center">
            <text>张推广达人</text>
            <view class="bg-gradient-to-r from-yellow-400 to-yellow-600 text-yellow-800 px-[15rpx] py-[5rpx] rounded-[20rpx] text-[24rpx] font-bold ml-[15rpx]">
              SVIP会员
            </view>
          </view>
          <text class="text-[28rpx] opacity-90">
            平台ID: <text class="bg-white bg-opacity-20 px-[15rpx] py-[3rpx] rounded-[15rpx] text-[24rpx]">888888</text>
          </text>
        </view>
      </view>
      
      <view class="bg-white bg-opacity-15 rounded-[20rpx] p-[25rpx] flex justify-between items-center">
        <view class="text-center">
          <text class="text-[26rpx] opacity-80 block mb-[10rpx]">平台账户余额</text>
          <text class="text-[40rpx] font-bold">¥ 8,568.50</text>
        </view>
        <nut-button 
          type="primary" 
          size="small"
          class="bg-white text-blue-600 px-[40rpx] py-[15rpx] rounded-[50rpx] text-[28rpx] font-bold"
          @click="handleWithdraw"
        >
          提现到微信
        </nut-button>
      </view>
    </view>

    <!-- 实名认证卡片 -->
    <view class="bg-gradient-to-r from-blue-400 to-cyan-400 text-white rounded-[25rpx] p-[30rpx] m-[30rpx] flex items-center justify-between shadow-lg">
      <view class="flex-1">
        <view class="text-[32rpx] font-bold flex items-center">
          <IconFont name="id-card" class="mr-[16rpx]" />
          <text>实名认证状态: </text>
          <text class="bg-green-500 px-[15rpx] py-[5rpx] rounded-[15rpx] text-[24rpx] ml-[15rpx]">已认证</text>
        </view>
      </view>
      <nut-button 
        type="default" 
        size="small"
        class="bg-white text-blue-600 px-[40rpx] py-[15rpx] rounded-[50rpx] text-[28rpx] font-bold"
        @click="handleViewAuth"
      >
        查看详情
      </nut-button>
    </view>

    <!-- 功能入口卡片 -->
    <view class="bg-white rounded-[25rpx] p-[30rpx] m-[30rpx] shadow-lg">
      <view class="flex justify-between items-center mb-[30rpx] pb-[20rpx] border-b border-gray-100">
        <text class="text-[34rpx] font-bold text-gray-800">我的功能</text>
        <IconFont name="th-large" class="text-blue-500 text-[40rpx]" />
      </view>
      
      <view class="grid grid-cols-4 gap-[30rpx]">
        <view 
          v-for="(item, index) in functionItems" 
          :key="index"
          class="flex flex-col items-center"
          @click="handleFunctionClick(item.name)"
        >
          <view class="w-[90rpx] h-[90rpx] bg-blue-50 rounded-[25rpx] flex items-center justify-center mb-[15rpx]">
            <IconFont :name="item.icon" class="text-blue-500 text-[40rpx]" />
          </view>
          <text class="text-[26rpx] text-gray-600">{{ item.name }}</text>
        </view>
      </view>
    </view>

    <!-- 会员等级卡片 -->
    <view class="bg-white rounded-[25rpx] p-[30rpx] m-[30rpx] shadow-lg">
      <view class="flex justify-between items-center mb-[30rpx] pb-[20rpx] border-b border-gray-100">
        <text class="text-[34rpx] font-bold text-gray-800">会员等级与扣点</text>
        <IconFont name="crown" class="text-blue-500 text-[40rpx]" />
      </view>
      
      <view class="flex justify-between mb-[30rpx]">
        <view class="bg-gray-50 rounded-[20rpx] p-[30rpx] w-[48%] text-center">
          <text class="text-[32rpx] font-bold mb-[15rpx] block">普通会员</text>
          <text class="text-[48rpx] font-bold text-red-500 mb-[20rpx] block">15%</text>
          <text class="text-[26rpx] text-gray-600">平台信息服务费比例</text>
        </view>
        
        <view class="bg-gray-50 rounded-[20rpx] p-[30rpx] w-[48%] text-center">
          <text class="text-[32rpx] font-bold mb-[15rpx] block">SVIP会员</text>
          <text class="text-[48rpx] font-bold text-red-500 mb-[20rpx] block">5%</text>
          <text class="text-[26rpx] text-gray-600 mb-[20rpx] block">平台信息服务费比例</text>
          <nut-button 
            type="warning" 
            size="small"
            class="w-full text-[28rpx] font-bold"
            @click="handleUpgrade"
          >
            立即升级
          </nut-button>
        </view>
      </view>
      
      <view class="mb-[20rpx]">
        <view class="flex justify-between mb-[10rpx] text-[26rpx] text-gray-600">
          <text>本月提现额度</text>
          <text>¥ 8,568 / ¥ 15,000</text>
        </view>
        <view class="h-[20rpx] bg-gray-200 rounded-[10rpx] overflow-hidden">
          <view class="h-full bg-blue-500 rounded-[10rpx] w-[65%]"></view>
        </view>
      </view>
    </view>

    <!-- 推广卡片 -->
    <view class="bg-gradient-to-r from-purple-600 to-blue-500 text-white rounded-[25rpx] p-[30rpx] m-[30rpx] relative overflow-hidden">
      <view class="absolute top-0 right-0 w-[200rpx] h-full bg-white bg-opacity-10 transform skew-x-[-20deg] origin-top-right"></view>
      <view class="relative z-2">
        <text class="text-[36rpx] font-bold mb-[20rpx] block">推广奖励计划</text>
        <text class="text-[28rpx] mb-[30rpx] block leading-[1.5]">
          邀请好友注册，获得二级分销奖励<br/>
          推广会员消费您可获得提成，最高可达15%
        </text>
        <nut-button 
          type="default" 
          size="large"
          class="bg-white text-purple-600 px-[50rpx] py-[20rpx] rounded-[50rpx] text-[32rpx] font-bold mx-auto block"
          @click="handlePromotion"
        >
          立即推广
        </nut-button>
      </view>
    </view>

    <!-- 数据统计卡片 -->
    <view class="bg-white rounded-[25rpx] p-[30rpx] m-[30rpx] shadow-lg">
      <view class="flex justify-between items-center mb-[30rpx] pb-[20rpx] border-b border-gray-100">
        <text class="text-[34rpx] font-bold text-gray-800">我的数据统计</text>
        <IconFont name="chart-pie" class="text-blue-500 text-[40rpx]" />
      </view>
      
      <view class="grid grid-cols-3 gap-[20rpx]">
        <view class="bg-gray-50 rounded-[20rpx] p-[25rpx] text-center">
          <text class="text-[40rpx] font-bold text-blue-500 mb-[10rpx] block">128</text>
          <text class="text-[26rpx] text-gray-600">总推广会员</text>
        </view>
        <view class="bg-gray-50 rounded-[20rpx] p-[25rpx] text-center">
          <text class="text-[40rpx] font-bold text-blue-500 mb-[10rpx] block">86</text>
          <text class="text-[26rpx] text-gray-600">已消费会员</text>
        </view>
        <view class="bg-gray-50 rounded-[20rpx] p-[25rpx] text-center">
          <text class="text-[40rpx] font-bold text-blue-500 mb-[10rpx] block">¥3,856</text>
          <text class="text-[26rpx] text-gray-600">推广奖励</text>
        </view>
      </view>
    </view>

    <!-- 平台商家卡片 -->
    <view class="bg-white rounded-[25rpx] p-[30rpx] m-[30rpx] shadow-lg">
      <view class="flex justify-between items-center mb-[30rpx] pb-[20rpx] border-b border-gray-100">
        <text class="text-[34rpx] font-bold text-gray-800">平台商家服务</text>
        <IconFont name="store" class="text-blue-500 text-[40rpx]" />
      </view>
      
      <view class="grid grid-cols-4 gap-[30rpx]">
        <view 
          v-for="(item, index) in merchantItems" 
          :key="index"
          class="flex flex-col items-center"
          @click="handleMerchantClick(item.name)"
        >
          <view class="w-[90rpx] h-[90rpx] bg-blue-50 rounded-[25rpx] flex items-center justify-center mb-[15rpx]">
            <IconFont :name="item.icon" class="text-blue-500 text-[40rpx]" />
          </view>
          <text class="text-[26rpx] text-gray-600">{{ item.name }}</text>
        </view>
      </view>
    </view>

    <!-- 底部导航 -->
    <view class="fixed bottom-0 left-0 w-[750rpx] bg-white flex justify-around py-[20rpx] shadow-lg z-100">
      <view 
        v-for="(nav, index) in navItems" 
        :key="index"
        class="flex flex-col items-center text-[24rpx]"
        :class="nav.active ? 'text-blue-500' : 'text-gray-400'"
        @click="handleNavClick(nav.name)"
      >
        <IconFont :name="nav.icon" class="text-[40rpx] mb-[8rpx]" />
        <text>{{ nav.name }}</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Taro from '@tarojs/taro'

// 功能项目
const functionItems = ref([
  { name: '我的任务', icon: 'tasks' },
  { name: '我的订单', icon: 'file-invoice-dollar' },
  { name: '我的钱包', icon: 'wallet' },
  { name: '我的团队', icon: 'user-friends' },
  { name: '我的培训', icon: 'graduation-cap' },
  { name: '我的商家', icon: 'building' },
  { name: '我的评价', icon: 'star' },
  { name: '推广中心', icon: 'qrcode' }
])

// 商家项目
const merchantItems = ref([
  { name: '成为商家', icon: 'user-tie' },
  { name: '服务商', icon: 'tools' },
  { name: '培训商', icon: 'chalkboard-teacher' },
  { name: '传承商', icon: 'hands-helping' }
])

// 底部导航
const navItems = ref([
  { name: '首页', icon: 'home', active: false },
  { name: '任务', icon: 'tasks', active: false },
  { name: '我的', icon: 'user', active: true },
  { name: '消息', icon: 'comments', active: false },
  { name: '更多', icon: 'ellipsis-h', active: false }
])

// 提现
const handleWithdraw = () => {
  Taro.showToast({
    title: '提现申请已提交，将在1-3个工作日内到账',
    icon: 'success'
  })
}

// 查看认证详情
const handleViewAuth = () => {
  Taro.showToast({
    title: '实名认证信息：\n姓名：张推广达人\n身份证：450***************\n认证时间：2023-06-15',
    icon: 'none'
  })
}

// 升级会员
const handleUpgrade = () => {
  Taro.showToast({
    title: '正在跳转SVIP会员升级页面',
    icon: 'none'
  })
}

// 推广
const handlePromotion = () => {
  Taro.showToast({
    title: '正在打开推广中心',
    icon: 'none'
  })
}

// 功能点击
const handleFunctionClick = (name: string) => {
  Taro.showToast({
    title: `正在打开${name}`,
    icon: 'none'
  })
}

// 商家点击
const handleMerchantClick = (name: string) => {
  Taro.showToast({
    title: `正在打开${name}`,
    icon: 'none'
  })
}

// 导航点击
const handleNavClick = (name: string) => {
  navItems.value.forEach(item => {
    item.active = item.name === name
  })
  
  Taro.showToast({
    title: `切换到${name}`,
    icon: 'none'
  })
}
</script>